웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 텍스트 말하는 기능 구현. speechSynthesis

Last Modified : 2023-03-06 / Created : 2023-02-11
3,818
View Count
웹페이지에서 자바스크립트를 사용하여 말하는 기능(Speaking)을 구현하려고 합니다. 어떻게 가능한지 아래에서 알아봅니다.




# 자바스크립트 말하기 기능 만들기,  SpeechSynthesis


웹에서 말하기 기능을 구현하는 방법으로 SpeechSynthesis 웹 API를 사용하여 가능합니다. 참고로 SpeechSynthesis의 사전적 의미는 '음성 합성'이란 뜻을 가지고 있습니다. 시작에 앞서 간단하게  "안녕하세요!"라고 말하도록 기능을 구현해보겠습니다. 먼저 mySynth 변수에 SpeechSynthesis를 선언합니다.
const mySynth = window.speechSynthesis;

해당 인스턴스는 speak()라는 가장 중요한 말하게 해주는 기능의 메소드를 가지고 있습니다. 이 메소드에 단순 텍스트를 사용하여 아래와 같이 명령하면 에러가 발생하게 됩니다. 
mySynth.speak('Hello');

// 실행결과
VM2902:1 Uncaught TypeError: Failed to execute 'speak' on 'SpeechSynthesis': parameter 1 is not of type 'SpeechSynthesisUtterance'.

에러 메시지를 확인해보니 첫 인자인 'Hello'가 SpeechSynthesisUtterance타입이 아니라는 에러가 발생합니다. 즉 speak()를 사용할 때에는 SpeechSynthesisUtterance를 사용하여만 가능합니다. 여기서 SpeechSynthesisUtterance는 무엇일까요? 이 것 역시 말하기 위한 웹 API이며 가장 중요한 말 할 텍스트를 선언할 수 있고 이 때 사용할 언어, 속도, 목소리 및 볼륨 등을 설정하는 것도 모두 SpeechSynthesisUtterance를 사용하여 가능하게 됩니다.

그럼 가장 간단한 예제를 만들어 알아봅니다. 이제 SpeechSynthesisUtterance 사용해 'Hello' 텍스트를 사용하여 인스턴스를 만들어봅니다. 이 때는 new 키워드를 사용하도록 합니다. 생성된 인스턴스에 이제 아까 만들어 둔 mySynth.speak()에 사용해봅니다.
const utterance = new SpeechSynthesisUtterance('안녕하세요');

mySynth.speak(utterance);

위 코드를 실행하면 스피커를 통해 "안녕하세요"라고 말하는 것을 들을 수 있습니다. 이제 실제로 말하는 기능 구현은 가능하게 되었는데요 ~ 추가로 몇 가지 주요한 옵션을 알아봅니다.

  • utterance.text = '다시 또 안녕하세요'; // 말 할 텍스트 문구
  • utterance.lang = 'ko'; // 한국어 설정. 영어는 'en'
  • utterance.rate = 1; // (0 ~ 10) 말하는 속도를 설정하기 
  • utterance.volume = 0.5 // (0 ~ 1 범위) 말하는 크기, 볼륨 설정하기
  • utterance.pitch= 0.5 // (0 ~ 2 범위) 말하는 톤의 크기 설정하기


위 옵션들은 말 할 문구를 설정하거나 말하는 속도, 톤 등을 조절하는데 매우 유용한 옵션 설정 방법입니다. 참고로 아래의 voice의 값에 따라서 위의 옵션 설정 크기가 달라질 수 있으니 참고하시기 바랍니다.

다음으로 목소리를 변경하는 방법은 voice 옵션을 사용해야 합니다.

  • utterance.voice = speechSynthesis.getVoices()[0] // 사용 가능한 목소리를 설정하기


이 때 사용 가능한 목소리를 무엇인지 알아야 합니다. 아래처럼 speechSynthesis.getVoices();를 입력하면 현재 사용 가능한 목소리를 모두 알려줍니다.
speechSynthesis.getVoices();

실행 후 출력된 리스트 중에서 원하는 음성을 찾아 설정해야 합니다. 리스트에는 사용 가능한 언어별로 다양한 voice(목소리)가 포함된 것을 확인할 수 있습니다.


여기까지 자바스크립트를 사용하여 말하기 기능을 구현하기 위한 주요한 옵션과 방법들을 알아봤습니다. 이를 좀 더 쉽게 사용하기 위해서 아래에서는 간편한 함수를 하나 작성하도록 하겠습니다.
const speakText = function(text, options) {
  if (!text) return;
  synth = window.speechSynthesis;
  utterance = new SpeechSynthesisUtterance(text);
  if (speechSynthesis.pending) speechSynthesis.pending.cancel();
  if (options && Object.keys(options).length) {
    Object.keys(options).forEach(opt => {
      utterance[opt] = options[opt]
    })
  }
  synth.speak(utterance);
}

위 함수를 사용하면 좀 더 편하게 말하기 기능을 구현할 수 있을 것입니다. 간단하게 위 코드를 사용하여 입력폼을 사용해 직접 아래에 구현해보았습니다. 원하는 텍스트를 입려하고 Speak 버튼을 눌러보세요.


* 말 할  텍스트를 아래에 입력하세요.
<div>
<input id="testSpeak" />
<p>언어 lang <select id="testSpeakLang" ><option default value="ko">Korean</option><option value="en">English</option></select></p>
<p>속도 rate <input type="number" max="10" min="0" id="testSpeakRate" value="1" /></p>
<p>볼륨 volume <input type="number" max="1" min="0" id="testSpeakVolume" value="0.5" /></p>
<p>톤 pitch <input type="number" max="2" min="0.5" id="testSpeakPitch" value="1" /></p>
</div>
<button onclick="runSpeakText()">Speak</button>
<script>
window.speakText = function(text, options) {
if (!text) return;
synth = window.speechSynthesis;
utterance = new SpeechSynthesisUtterance(text);
if (speechSynthesis.pending) speechSynthesis.pending.cancel();
if (options && Object.keys(options).length) {
Object.keys(options).forEach(opt => {
utterance[opt] = options[opt]
})
}
synth.speak(utterance);
};
window.runSpeakText = function() {
const testText = document.getElementById('testSpeak').value;
const testTextLang = document.getElementById('testSpeakLang').value;
const testTextRate = document.getElementById('testSpeakRate').value;
const testTextPitch = document.getElementById('testSpeakPitch').value;
const testTextVolume = document.getElementById('testSpeakVolume').value;
speakText(testText, { lang: testTextLang, rate: testTextRate, pitch: testTextPitch, volume: testTextVolume  });
};
</script>



위 함수는 간단하게 말 할 텍스트를 입력하거나 옵션을 설정할 때 보다 쉽게 사용할 수 있습니다.

@ 그냥 텍스트를 말하기
speakText('Hello Webisfree.com.')


@ 볼륨 크기를 좀 더 크거나 작게하기
speakText('Hello Webisfree.com.', { volume: 0.3 })
speakText('Hello Webisfree.com.', { volume: 1 })


@ 좀 더 빠르게 말하기
speakText('Hello! Webisfree.com.', { rate: 2 })


@ 톤을 높이거나 낮추기
speakText('Hello! Webisfree.com.', { pitch: 0.8 })
speakText('Hello! Webisfree.com.', { pitch: 1.5 })


@ 보이스 변경하기
speakText('안녕하세요! 웹이즈프리!', { voice: speechSynthesis.getVoices()[0] })


한 번에 여러개의 옵션을 함께 설정할 수 있습니다.
speakText('Hello! Webisfree.com.', { volume: 0.5, pitch: 1.5 })
speakText('안녕하세요! 웹이즈프리!', { volume: 1, rate: 1.2, voice: speechSynthesis.getVoices()[1] })

참고로 아래의 코드는 중간에 에러 등이 발생하여 pending 된 경우 기존 명령을 취소하고 재사용하기 위해서 추가된 코드입니다.
if (speechSynthesis.pending) speechSynthesis.pending.cancel();


여기까지 자바스크립트를 사용하여 웹브라우저에서 텍스트 문구를 말하는 기능을 만들어 보았습니다.

SpeechSynthesis SpeechSynthesisUtterance 말하기
아래의 글도 찾고 계시지 않나요?

    Previous

    [자바스크립트] 카멜 케이스, 파스칼케이스, 스네이크 케이스를 케밥 케이스로 변경하기, toKebabCase

    Previous

    [자바스크립트] 배열의 최대 길이의 값을 설정하는 방법